<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { useRoute } from "vue-router";
import { useK8SApi } from "@/views/domain/kubeHud/api/k8s/k8s";
import { StatefulSet, Pod } from "@/views/domain/kubeHud/api/k8s/types";
import ResourceDetailsContainer from "../components/ResourceDetailsContainer.vue";
import KDescGroup from "../components/KDescGroup.vue";
import KDescRow from "../components/KDescRow.vue";
import InTagLine from "../components/InTagLine.vue";
import MetadataDescription from "../components/MetadataDescription.vue";

const { statefulSetRepo } = useK8SApi();

type Prop = {
  name?: string;
  namespace?: string;
};

const route = useRoute();

const props = defineProps<Prop>();

const model = ref<StatefulSet>();
const dsPods = ref<Pod[]>();

const loading = ref(false);
const query = reactive<{
  name?: string;
  namespace?: string;
}>({});

const reload = async () => {
  loading.value = true;

  const { ok, data } = await statefulSetRepo.getStatefulSetDetail({
    namespace: query.namespace,
    name: query.name
  });

  if (ok) {
    model.value = data;
  }

  loading.value = false;
};

onMounted(() => {
  query.name = (route.query?.name as any) ?? props.name;
  query.namespace = (route.query?.namespace as any) ?? props.namespace;
  reload();
});
</script>

<template>
  <ResourceDetailsContainer
    v-if="model"
    :title="'StatefulSet: ' + model?.metadata?.name"
  >
    <MetadataDescription :metadata="model.metadata" />
  </ResourceDetailsContainer>
  <div v-else v-loading="true" />
</template>
<style lang="scss" scoped></style>
